<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" name="search" id="search">
  <ul id="result"></ul>
  <script type="module">
    import { getJSON } from './index.js';
    const search = document.getElementById('search')
    const result = document.getElementById('result')
    const url = 'https://www.imooc.com/api/http/search/suggest?words=';
    const handleInputEvent = () => {
      if (search.value.trim() !== "") {
        result.style.display = "black"
        getJSON(`${url}${search.value}`).then(response => {
          console.log(response);
          let html = '';
          for (const item of response.data) {
            html += `<li>${item.word}</li>`
          }
          result.innerHTML = html;

        }).catch(err => {
          console.log(err);
        })
      } else {
        result.innerHTML = ""
        result.style.display = "none"
      }
    }
    let timer=null
    search.oninput = function () {
      if(timer){
        clearTimeout()
      }
      timer=setTimeout(handleInputEvent,3000)
    }
  </script>
</body>

</html>